<!-- 状态详情 -->

<template>
  <div class="FaceLib-StatusDetail marginBottom">
    <b>{{ obj.name }}</b>

    <div v-for="item in obj.faceDeviceDto" :key="item.id" class="flex">
      <img :src="getImg(item)" />
      <span>{{ item.deviceName }}</span>

      <div v-if="item.syncStatus === 2" v-bind="props2">同步中</div>
      <div v-else-if="item.syncStatus === 3" v-bind="props3">同步成功</div>
      <div v-else-if="item.syncStatus === 4" v-bind="props4">同步失败</div>
      <div v-else v-bind="props1">未同步</div>

      <BtnText v-if="![2, 3].includes(item.syncStatus)" title="重新同步" @click="toSubmit(item)" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import DeviceBody from '@admin/views/Secure/mixDevice/DeviceBody'
import UTIL from '../UTIL'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'StatusDetail',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 未同步属性
     */
    props1: () => UTIL.getStatusProps('灰'),

    /**
     * 同步中属性
     */
    props2: () => UTIL.getStatusProps('蓝'),

    /**
     * 同步成功属性
     */
    props3: () => UTIL.getStatusProps('绿'),

    /**
     * 同步失败属性
     */
    props4: () => UTIL.getStatusProps('红'),
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取图片
     */
    getImg: DeviceBody.methods.getImg,

    /**
     * 点击提交
     */
    toSubmit(item) {
      Object.assign(this.one, {
        faceLiId: this.obj.id, // 建模的人脸库 ID
        faceDeviceId: item.id, // 建模的设备 ID
      })
      this.startSubmit()
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
